<template>
  <el-dialog v-model="aaa" title="批量上传附件" width="40%"
   class="notice-dialog"  @close="closeHandle" @close-click-modal="closeHandle">
   <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
  >
    <el-form-item label="选择对应计划：" prop="option" label-width="120px" >
      <el-select v-model="form.option" placeholder="请选择" style="width:100%">
        <el-option label="选项1" value="option1"></el-option>
        <el-option label="选项2" value="option2"></el-option>
        <el-option label="选项3" value="option3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="fileList" required>
        <el-upload
            class="upload-demo"
            drag
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :before-upload="beforeUpload"
            style="width:100%"
            v-model:file-list="form.fileList"
        >
            <img src="@/assets/images/management/upload-icon.png" alt="" srcset="">
            <div class="el-upload__text">
            只能上传后缀为.doc、.docx、.txt、.pdf格式的文件
            </div>
            <el-button type="primary">点击上传</el-button>
        </el-upload>
    </el-form-item>
  </el-form>
    <template #footer>
      <el-row>
        <el-col :span="12" align="start">
          <el-button type="text" @click="saveHandle"><el-icon><SetUp /></el-icon> 导入模板 </el-button>
        </el-col>
        <el-col :span="12" align="end">
          <el-button @click="closeHandle">取消</el-button>
          <el-button type="primary" @click="saveHandle"> 上传附件 </el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>
<script setup>
const fileVisible = defineProps({
  dialogVisible: Boolean,
});
const aaa = ref(fileVisible.dialogVisible);
watch(
  () => fileVisible.dialogVisible,
  (v) => {
    aaa.value = v;
  },
);
const emit = defineEmits(['getValue']);
const formRef = ref(null); // 创建 ref 对象
const closeHandle = () => {
  formRef.value.resetFields();
  emit('getValue', false);
};
const form = ref({
  fileList: '',
  option: '',
});
const rules = ref({
  fileList: [
    { required: true, message: '请选择文件', trigger: 'change' },
  ],
  option: [
    { required: true, message: '请选择下拉框选项', trigger: 'change' },
  ],
});
// 文件校验
const beforeUpload = (file) => {
  const allowedExtensions = ['.doc', '.docx', '.txt', '.pdf'];
  const extension = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
  if (!allowedExtensions.includes(extension)) {
    formRef.value.markFieldAsError('fileList');// 标记表单项为错误状态
    formRef.value.validate(); // 手动触发表单校验
    return false;
  }
  return true;
};
const saveHandle = () => {
  console.log(formRef);
  formRef.value.validate((valid) => { // 使用 formRef.value
    if (valid) {
      // 表单验证通过，提交表单的逻辑
      console.log('表单验证通过');
      formRef.value.resetFields();
      emit('getValue', false);
    } else {
      // 表单验证不通过，做相应处理
      console.log('表单验证不通过');
      return false;
    }
  });
};
</script>
<style lang="scss">
.notice-dialog .el-dialog__header {
  background:#f6f7fb;
  margin-right: 0;
  border-bottom: 1px solid #eaecf2;
  span{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #25292C;
    line-height: 22px;
  }
}
.el-dialog__footer{
    border-top: 1px solid #eaecf2;
}
.el-button--text{
    text-decoration: underline;
}
</style>
